/**
 * @description 红包列表
 */
import style from './styles/App.less';
import classnames from "classnames";
import EntryBase from "../Common/EntryBase";
import React, { Component } from 'react';
import { Popup } from 'wd-mobile';
import ScrollReachEndContainer from "components/ScrollReachEndContainer";
import CategoryGoodsItem from "components/CategoryGoodsItem";
const Fragment = React.Fragment;
import util from "commons/util";
//api
import { unuse_list,used_list,expired_list } from 'api_xukaiyu/app/coupons'
import {queryAvailableList} from 'api_liuhaojie/app/goods'
//img
import img_nolist from 'images/norecord.png'
let statuList = [{ name: '未使用', status: 'UNUSED' }, { name: '已使用', status: 'HAVE_BEEN_USED' }, { name: '已失效', status: 'HAVE_EXPIRED' }]
class RedPacket extends EntryBase {
  constructor() {
    super();
    this.state = {
      records: [],//列表
      page: 1, // 页数
      hasload: false,
      isLoading: false,// 正在加载
      status: 'UNUSED',
      visible: false,
      shopList: [],//适用商品列表
      scrollLoadText: "正在查询红包列表...",
      showScrollLoadText:false
    };
    // 是否正在加载数据
    this.loading = false;
  }

  componentDidMount() {
    this.toLoad();
  }

  toLoad() {
    let { status, page, records } = this.state;
    let list='';
    if(status=='UNUSED') list=unuse_list;
    if(status=='HAVE_BEEN_USED') list=used_list;
    if(status=='HAVE_EXPIRED') list=expired_list;
    list({ pageIndex: page, pageSize: 10 }).then(data => {
      this.setState({
        records: records.concat(data.data || []),
        showScrollLoadText: records.concat(data.data || []).length > 0,
        scrollLoadText: data.data.length < 10 ? "没有更多订单" : "正在加载更多订单...",
        hasload: true
      })
      this.loading = false;
    })
  }

  useBtn = (item) => {
    queryAvailableList({couponId:item.couponId}).then(data=>{
      this.setState({
        visible: true,
        shopList:data.data||[]
      })
    })
  
  }

  // 触底
  reachEnd() {
    if (!this.loading) {
      this.loading = true;
      this.setState({
        page: this.state.page + 1
      }, () => {
        this.toLoad();
      })
    }
  }



  render() {
    let { status, records, shopList, hasload } = this.state;
    return (
      <Fragment>
        <div className={style.app}>
          <div className={style.NavBar}>
            {
              statuList.map(item => {
                return <div className={classnames(style.item, { [style.active]: status == item.status })} onClick={() => {
                  this.setState({
                    status: item.status,
                    page: 1,
                    records: []
                  },()=>{
                    this.toLoad();
                  })
                }} key={item.status}>{item.name}</div>
              })
            }
          </div>
          <ScrollReachEndContainer throttleTime={100} showScrollLoadText={this.state.showScrollLoadText} loadText={this.state.scrollLoadText} className={classnames(style.redList, "x-scroll-y")} onReachEnd={() => {
            this.reachEnd();
          }}>
            {
              records.length ? records.map((item, index) => {
                return <RedItem key={index} useBtn={this.useBtn} item={item} />
              }) : ''
            }
            {
              records.length <= 0 && !!hasload && <div className={style.nolist}>
                <img src={img_nolist} alt="" />
                <div>列表暂无信息</div>
              </div>
            }
          </ScrollReachEndContainer>
        </div>
        <Popup maskStyle={{ background: 'rgba(0,0,0,.3)' }} mask={true} animation="bottom" offset={{ bottom: 0, left: 0, right: 0 }} visible={this.state.visible}>
          <div className={style.redpacketPop}>
            <div className={style.title}>适用商品<div className={style.close} onClick={() => {
              this.setState({
                visible: false
              })
            }}></div></div>
            <div className={style.shopList}>
              {
                  shopList.map((item, index) => {
                    return (
                        <CategoryGoodsItem key={index} data={item} bookGoods={() => {
                            bookGoods({
                                skuId: item.id
                            }).then(res => {
                                const newGoodsList = [...this.state.goodsList];
                                newGoodsList[index].isBook = true;
                                this.setState({
                                    goodsList: newGoodsList
                                })
                            })
                        }} unBookGoods={() => {
                            unBookGoods({
                                skuId: item.id
                            }).then(res => {
                                const newGoodsList = [...this.state.goodsList];
                                newGoodsList[index].isBook = false;
                                this.setState({
                                    goodsList: newGoodsList
                                })
                            })
                        }} />
                    )
                })
              }
            </div>
            <div className={style.moreShop} onClick={()=>{
              location.href='./category.html';
            }}>查看更多商品</div>
          </div>
        </Popup>
      </Fragment>
    );
  }
}

class RedItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      item: props.item,
      active: false
    }
  }
  render() {
    let { item, active } = this.state;

    let bgimg='normal';
    if(item.status=="UNUSED"||item.status=='FREEZING'||item.status=='IN_USE'){
      (item.cardType==1)&&(bgimg='discount');
    }else if(item.status=='HAVE_BEEN_USED'){
      bgimg='hasUseds'
    }else if(item.status=='HAVE_EXPIRED'){
      bgimg='hasExpired'
    }
    return <div className={classnames(style.nouse,{[style.isNew]:!!item.isNew&&item.status=="UNUSED"})}>
      <div className={classnames(style.bg,style[bgimg])}>
        <div className={style.discounts}>
          <div className={style.redMoney}>
            {item.cardType==1?<span>{util.Mul(item.couponRatio,10)}折</span>:<span><span className={style.currency}>¥</span>{item.amount}</span>}
          </div>
          <div className={style.useLimit}>{item.tips}</div>
        </div>
        <div className={style.redContent}>
          <div className={style.main}>
            <div className={style.content}>
              <div className={style.redTitle}>{item.cardName}</div>
              <div className={style.useTime}>{util.dateFormat(new Date(item.useStartTime),'yyyy.MM.dd')} - {util.dateFormat(new Date(item.pastDueTime),'yyyy.MM.dd')}</div>
            </div>
            {item.status=='UNUSED'?<div className={classnames(style.btn)} onClick={() => {
              this.props.useBtn && this.props.useBtn(item)
            }}>立即使用</div>:<div className={classnames(style.btn,style.freezen)}>{item.status=='FREEZING'?"冻结中":"使用中"}</div>}
          </div>
          <div className={style.ruleTitle} onClick={() => {
            this.setState({
              active: !active
            })
          }}>使用规则
                <div className={classnames(style.down, { [style.up]: active })}></div>
          </div>
        </div>
      </div>
      <div className={classnames(style.tips, { [style.active]: active })}>
        {
          item.limitTypeDesc.map((item,index)=>{
            return <div key={index}>· {item}</div>
          })
        }
        {
          item.firstOrderLimit==1?<div>· 限新人首单可用</div>:''
        }
        {
          item.seckillLimit==1?<div>· 秒杀商品不可用</div>:''
        }{
          item.status=='FREEZING'?<div>. {item.unfreezeCondition}</div>:''
        }
      </div>
    </div>
  }
}

export default RedPacket;